import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button, Row, Col, Spin, Tooltip} from 'antd';
import {
    WeaTable,
    WeaTab,
    WeaTop,
    WeaSearchGroup,
    WeaLocaleProvider,
    WeaLeftRightLayout,
    WeaFormItem,
    WeaPopoverHrm,
    WeaBrowser,
    WeaSelect,
    WeaRightMenu,
    WeaDatePicker
} from 'ecCom';
import PersonTree from '../../../public/persontree/PersonTree'
import {renderAlertPage, getCurrentHeight, setWindowKeys} from '../../../util/Util';

const getLabel = WeaLocaleProvider.getLabel;

/**
 * 绩效-考核报表-列表
 * jiansong 2019/6/12
 */
@inject("reportListStore")
@observer
export default class ReportList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showLeft: false, //是否显示左侧栏
            _height: getCurrentHeight(),
            collectParams: {
                favname: getLabel(506167, "考核报表"),
                favouritetype: "5",
                link: '/spa/workrelate/static/index.html#/main/workrelate/performance/performanceIndex?menutype=7',
                importantlevel: 1,
            }
        };
        this.store = this.props.reportListStore;
    }

    componentWillMount() {
        setWindowKeys(7, getLabel(506167, "考核报表"));
        this.store.doInit();
    }

    render() {
        let {loading, yearDatas, month, msg, showSearchAd, setShowSearchAd, queryParams, data, total, stabList, topTab, columns} = this.store;
        let {_height, collectParams} = this.state;
        //暂未开启任何考核周期
        if (msg == "0" && stabList && stabList.length == 0) {
            return renderAlertPage('<span style="color:red">' + getLabel('508557', '暂未开启任何考核周期') + '</span>','','','',this.props.ecId || '')
        }

        return (
            <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@xibmnm`} spinning={loading}>
                <div className="wea-workrelate-performance-reportList" style={{height: "100vh"}}>
                    <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@om580m`}/>
                    {msg == "1" && <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@dmk9jg`} collectParams={collectParams} datas={this.getMenus()} showUrlItem={false}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@7hu1xb`}
                            title={getLabel('506167', '考核报表')}
                            icon={<i className='icon-coms-implement'/>}
                            iconBgcolor='rgb(150, 53, 138)'
                            buttons={this.getButtons(this.props.ecId || '')}
                            showDropIcon={true}
                            dropMenuDatas={this.getMenus()}
                        />
                        <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@h9ez9m`}
                            isNew={true}
                            showLeft={true}
                            leftWidth={220}
                            leftCom={
                                <PersonTree ecId={`${this && this.props && this.props.ecId || ''}_PersonTree@2imsg0`}
                                    onPersonClick={this.onPersonClick}
                                    treeNodeClick={this.treeNodeClick}
                                />}
                            showLeft={this.state.showLeft}
                            onCollapse={showLeft => this.setState({showLeft})}
                        >
                            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@p2d6f8`}
                                datas={topTab}
                                searchType={["advanced"]}
                                showSearchAd={showSearchAd}
                                hideSearchAd={() => setShowSearchAd(false)}
                                keyParam="viewcondition"
                                selectedKey={queryParams.type1}
                                setShowSearchAd={bool => setShowSearchAd(bool)}
                                hideSearchAd={() => setShowSearchAd(false)}
                                buttonsAd={this.getTabButtonsAd()}
                                searchsAd={this.getSearchsAd()}
                                onChange={v => this.typeChange(v)}
                            />
                            <div className='year-date'>
              <span style={{width: 80, display: "inline-block"}}>
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dt3mdk`}
                      options={yearDatas}
                      value={queryParams.year}
                      onChange={(val) => this.yearChange(val)}
                  />
              </span>
                                {
                                    queryParams.type1 == "3" || queryParams.type1 == "4" ?
                                        <span style={{padding: "0 8px"}}>
                  --
                </span>
                                        : ""
                                }
                                {
                                    queryParams.type1 == "3" || queryParams.type1 == "4" ?
                                        <span style={{width: 80, display: "inline-block"}}>
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2gfgja`}
                      options={yearDatas}
                      value={queryParams.year2}
                      onChange={(val) => this.year2Change(val)}
                  />
                </span>
                                        : ""
                                }
                            </div>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5fd18u`}
                                columns={columns}
                                bordered={true}
                                dataSource={data}
                                className="wea-new-table"
                                scroll={{y: _height - 260, x: 800}}
                                pagination={{
                                    total: total,
                                    onChange: this.showCurrentChange,
                                    showTotal: () => getLabel(509103, `共{total}条`).replace('{total}', total),
                                    current: queryParams.current,
                                    showQuickJumper: true,
                                    pageSize: queryParams.pageSize,
                                    showSizeChanger: true,
                                    onShowSizeChange: this.onShowSizeChange
                                }}
                            />
                        </WeaLeftRightLayout>
                    </WeaRightMenu>}
                </div>
            </Spin>
        )
    }

    //获取菜单
    getMenus = () => {
        const {advanceSearch, exportData} = this.store;
        return [{
            key: '0',
            icon: <i className='icon-coms-search'/>,
            content: getLabel('388113', '搜索'),
            onClick: advanceSearch,
        }, {
            key: '1',
            icon: <i className="icon-coms-export"/>,
            content: getLabel(27648, '导出报表'),
            onClick: exportData,
        }];
    }

    //获取button
    getButtons = (ecId) => {
        const {exportData, exportLoading} = this.store;
        return [
            <Tooltip ecId={`${ecId}_Tooltip@hnomar@exportdata`} title={getLabel(27648, '导出报表')}><Button ecId={`${ecId}_Button@s7e04p@exportdata`} type='primary' loading={exportLoading}
                                                             onClick={exportData}>{getLabel(27648, '导出报表')}</Button></Tooltip>
        ];
    }

    //点击节点
    treeNodeClick = (event, ids, selectedKeys, nodes) => {
        let {getReportListData, onSearchChange} = this.store;
        let {name, type, id} = nodes[0];
        switch (type) {
            case '3':
                onSearchChange({
                    'hrmids': id,
                    'hrmnames': name,
                    'departmentids': null,
                    'departmentnames': null,
                    'subcompanyids': null,
                    'subcompanynames': null
                });
                break;
            case '2':
                onSearchChange({
                    'hrmids': null,
                    'hrmnames': null,
                    'departmentids': id,
                    'departmentnames': name,
                    'subcompanyids': null,
                    'subcompanynames': null
                });
                break;
            case '1':
                onSearchChange({
                    'hrmids': null,
                    'hrmnames': null,
                    'departmentids': null,
                    'departmentnames': null,
                    'subcompanyids': id,
                    'subcompanynames': name
                });
                break;
        }
        getReportListData();
    }

    //点击人员
    onPersonClick = (hrmId, hrmname) => {
        let {getReportListData, onSearchChange} = this.store;
        onSearchChange({
            'hrmids': hrmId,
            'hrmnames': hrmname,
            'departmentids': null,
            'departmentnames': null,
            'subcompanyids': null,
            'subcompanynames': null
        });
        getReportListData();
    }

    //查询类型变动
    typeChange = value => {
        this.store.onSearchChange({"type1": value});
        this.store.onSearchChange({"year": new Date().getFullYear().toString()})
        if (value == "3" || value == "4") {
            this.store.onSearchChange({"year2": new Date().getFullYear().toString()})
        }
        this.store.advanceSearch();
    }

    //年份改变
    yearChange = value => {
        this.store.onSearchChange({"year": value});
        this.store.advanceSearch();
    };

    //截止年份改变
    year2Change = value => {
        this.store.onSearchChange({"year2": value});
        this.store.advanceSearch();
    };

    //当前页数改变
    showCurrentChange = (current) => {
        this.store.onSearchChange({"current": current});
        this.store.getReportListData();
    }

    //每页展示数量改变
    onShowSizeChange = (current, pageSize) => {
        this.store.onSearchChange({"pageSize": pageSize});
        this.store.getReportListData();
    }

    //获取高级搜索按钮
    getTabButtonsAd() {
        let {advanceSearch, setShowSearchAd, resetParams} = this.store;
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@npjuj9@search`} type="primary" onClick={advanceSearch}>{getLabel('388113', '搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xhr71u@reset`} type="ghost" onClick={resetParams}>{getLabel('2022', '重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r5lb2p@cancel`} type="ghost" onClick={() => setShowSearchAd(false)}>{getLabel('31129', '取消')}</Button>)
        ]
    }

    //高级搜索条目
    getSearchsAd() {
        const {includesubData, includedeptData, queryParams, onSearchChange, hrmData, subcompanyData, departmentData} = this.store
        let items = [];
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@wggcg7@person`} label={getLabel('30042', '人员')} ratio1to2>
                    <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@y1qusl@person`}
                        type={17}
                        isSingle={false}
                        title={getLabel('179', '人力资源')}
                        replaceDatas={hrmData}
                        onChange={(ids, names) => onSearchChange({"hrmids": ids, "hrmnames": names})}
                    />
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@esbctv@includesub`} label={getLabel('33553', '分部')} ratio1to2>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@2yf3fa@includesub`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@osbejf@includesub`} span={8}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@8k7mhw@includesub`}
                                options={includesubData}
                                value={queryParams.includesub}
                                onChange={(val) => onSearchChange({"includesub": val})}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@zmoynv@subdata`} span={15} offset={1}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@mu5idt@subdata`}
                                type={164}
                                icon="icon-coms-hrm"
                                title={getLabel('33553', '分部')}
                                replaceDatas={subcompanyData}
                                onChange={(ids, names) => onSearchChange({
                                    "subcompanyids": ids,
                                    "subcompanynames": names
                                })}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        items.push({
            com:
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@3xrsz4@includedept`} label={getLabel('27511', '部门')} ratio1to2>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6zdueq@includedept`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0jo3c3@includedept`} span={8}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@p6tnyf@includedept`}
                                options={includedeptData}
                                value={queryParams.includedept}
                                onChange={(val) => onSearchChange({"includedept": val})}
                            />
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@xff7c2@deptdata`} span={15} offset={1}>
                            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@hpd606@deptdata`}
                                type={4}
                                title={getLabel('27511', '部门')}
                                icon="icon-coms-hrm"
                                replaceDatas={departmentData}
                                onChange={(ids, names) => onSearchChange({
                                    "departmentids": ids,
                                    "departmentnames": names
                                })}
                            />
                        </Col>
                    </Row>
                </WeaFormItem>
        });
        return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@5ncqbi`} title={getLabel('32905', '常用条件')} items={items} showGroup={true} col={2}/>
    }

};